<template>
  <div id="app">
    <div class="navIcon">
      <img class="navIconImg" src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/zg_banner.46f5c84.png">
    </div>
    <div class="home_icon_down">
      <img class="home_ybg" src="../../images/home_ybg.png">
      <div class="ma_list_div">
        <div class="ma_item_div" v-for="(item,index) in mySwiperData">
          <div class="ma_list_div_L">
            <div class="ma_list_div_LName" v-if="index==0">新古典地中海风情赏析</div>
            <div class="ma_list_div_LName" v-if="index==1">新日式智能风格</div>
            <div class="ma_list_div_LNameBG"></div>
            <div class="ma_list_div_LName2">地中海浪漫风情 /传递自然纯净之感 /阳光涌入怀抱 /传递自然纯净之感<br>
              地中海浪漫风情 /传递自然纯净之感 /阳光涌入怀
            </div>
          </div>
          <div class="ma_list_div_L">
            <div class="ma_list_div_L_C">三室两厅 / 套内90㎡ / 建面110㎡</div>
            <img class="ma_list_div_L_Img" src="../../images/zg_all.png">
          </div>
          <div class="ma_item_con " :id="gernerateId(index)" v-if="index==0">
            <swiper :options="swiperOption" :not-next-tick="notNextTick">
              <swiper-slide><img class="ma_item_con_Img"
                                 src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/zg_listbanner.a2b677e.png">
              </swiper-slide>
              <swiper-slide><img class="ma_item_con_Img"
                                 src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/zg_listbanner.a2b677e.png">
              </swiper-slide>
              <swiper-slide><img class="ma_item_con_Img"
                                 src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/zg_listbanner.a2b677e.png">
              </swiper-slide>
              <div class="ma_qh">
                <div class="ma_qh_L swiper-button-prev" slot="button-prev"><img src="../../images/zg_left.png"></div>
                <div class="ma_qh_L  swiper-button-next" slot="button-next"><img src="../../images/zg_right.png"></div>
              </div>
            </swiper>
            <div class="mabfb">
              <div class="mabfb_num">
                <span class="mabfb_numspan">90%</span><br>
                <span class="mabfb_numspan2">全屋智能完成度</span>
              </div>
              <div class="mabfb_num">
                <span class="mabfb_numspan">50%</span><br>
                <span class="mabfb_numspan2">采光度提升</span>
              </div>
            </div>
          </div>
          <div class="ma_item_con " :id="gernerateId(index)" v-if="index==1">
            <swiper :options="swiperOption" :not-next-tick="notNextTick">
              <swiper-slide><img class="ma_item_con_Img"
                                 src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/1.7b801d0.png"></swiper-slide>
              <swiper-slide><img class="ma_item_con_Img"
                                 src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/2.175b127.png"></swiper-slide>
              <swiper-slide><img class="ma_item_con_Img"
                                 src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/3.0b9d489.png"></swiper-slide>
              <swiper-slide><img class="ma_item_con_Img"
                                 src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/4.a979e28.png"></swiper-slide>
              <div class="ma_qh">
                <div class="ma_qh_L swiper-button-prev" slot="button-prev"><img src="../../images/zg_left.png"></div>
                <div class="ma_qh_L  swiper-button-next" slot="button-next"><img src="../../images/zg_right.png"></div>
              </div>
            </swiper>
            <div class="mabfb">
              <div class="mabfb_num">
                <span class="mabfb_numspan">90%</span><br>
                <span class="mabfb_numspan2">全屋智能完成度</span>
              </div>
              <div class="mabfb_num">
                <span class="mabfb_numspan">50%</span><br>
                <span class="mabfb_numspan2">采光度提升</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'

  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    name: "navmanage",
    data() {
      return {
        notNextTick: true,
        mySwiperData: [
          {"name": 0},
          {"name": 1},
        ],
        swiperOption: {
          pagination: '.swiper-pagination',
          loop: true,
          autoplay: 3000,
          effect: 'fade',
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide,
    },
    computed: {

      swiper: function () {
        return this.$refs.mySwiper.swiper
      },
    },
    methods: {
      swperOneUP: function () {
        this.swiper.slidePrev();
      },
      swperOneDown: function () {
        this.swiper.slideNext();
      },
      gernerateId: function (index) {
        return "swiper" + index
      }

    },
    mounted() {
      // for (var i = 0; i < this.mySwiperData.length; i++) {
      //   this.mySwiper[i].name = new Swiper('#swiper' + i, {
      //     loop: true,
      //     effect: 'fade',
      //   })
      // }

    }
  }
</script>

